<template>
  <div class="content-main">
    <el-container class="content-container">
      <el-header><Header /></el-header>
      <el-container>
        <el-aside class="aside" width="250px"><left-aside /></el-aside>
        <el-main><Middle /></el-main>
        <el-aside class="aside" width="250px"><right-aside /></el-aside>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Header from "../Header/index";
import LeftAside from "../leftAside/index";
import RightAside from "../rightAside/index";
import Middle from "../middle/index";
export default {
  components: {
    Header,
    LeftAside,
    RightAside,
    Middle,
  },
};
</script>
<style scoped>
.content-main {
  height: 100%;
}
.el-header {
  width: 100%;
  padding: 0;
  height: 60px;
}
.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.el-aside {
  background-color: #042a4a;
  color: #fff;
  height: 100%;
}

.el-main {
  background-color: #010c27;
  color: #fff;
  line-height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
